import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    BoxGeometry,
    Mesh,
    MeshBasicMaterial,
    Group,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

function init() {
    const scene = new Scene();
    const camera = new PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    camera.position.z = 5;

    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const woodMaterial = new MeshBasicMaterial({ color: 0x8b4513 });

    // Create table top
    const tableTopGeometry = new BoxGeometry(3, 0.1, 2);
    const tableTop = new Mesh(tableTopGeometry, woodMaterial);
    scene.add(tableTop);

    // Create table legs
    const legGeometry = new BoxGeometry(0.1, 1.5, 0.1);
    const legMaterial = new MeshBasicMaterial({ color: 0x8b4513 });

    const leg1 = new Mesh(legGeometry, legMaterial);
    leg1.position.set(1.4, -0.75, 0.8);

    const leg2 = new Mesh(legGeometry, legMaterial);
    leg2.position.set(1.4, -0.75, -0.8);

    const leg3 = new Mesh(legGeometry, legMaterial);
    leg3.position.set(-1.4, -0.75, -0.8);

    const leg4 = new Mesh(legGeometry, legMaterial);
    leg4.position.set(-1.4, -0.75, 0.8);

    const legsGroup = new Group();
    legsGroup.add(leg1, leg2, leg3, leg4);

    tableTop.add(legsGroup);

    // Add controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

    function animate() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
    }

    animate();
}

init();
